<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>

</body>
<script>
    // ES2017 标准引入了 async 函数，使得异步操作变得更加方便 (建立在Promise的基础上)。

    // 普通函数
    // function fn() {
    //     return 1;
    // }
    // var result = fn();
    // console.log(result);


    /* function fn() {
        return new Promise(function (resolve, reject) {
            // resolve(1);
            resolve(1);
        })
    } */

    // 异步函数 

    // 同步代码  => 直接返回  对应状态的Promise实例
    /*  async function fn() {
         // 成功状态
         // return 1;

         // 失败状态的
         // 哈哈;
         throw 1;
     }
     var result = fn();
     console.log(result); */

    //  异步代码  => 1. 先封装成Promise实例    2. 配合关键词 await 实现类似同步操作

    function readTxt(url) {
        return new Promise(function (resolve, reject) {
            $.ajax({
                type: "get",
                url: url,
                success: function (txt) {
                    resolve(txt);// 直接传递数据
                }
            })
        })
    }
    console.log("开始执行");
    async function fn() {
        // 等待异步操作 有了结果之后(p实例状态改变)  接收结果 赋值给变量 txt
        console.log("同步代码");
        var str = "";

        var txt = await readTxt("../data/1.txt");// p
        console.log("txt", txt);
        str += txt;

        var txt = await readTxt("../data/2.txt");// p
        console.log("txt", txt);
        str += txt;

        var txt = await readTxt("../data/3.txt");// p
        console.log("txt", txt);
        str += txt;

        return str;
    }
    var result = fn();
    console.log("页面加载完毕", result);

    result.then(v => { console.log(v) }).catch(err => { throw err })


</script>

</html>